<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar-wrap">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
          <view class="level-tag">Lv.{{userInfo.level || 1}}</view>
        </view>
        <view class="info">
          <view class="name-wrap">
            <text class="name">{{userInfo.nickname}}</text>
            <view class="vip-tag" v-if="userInfo.isVip">
              <image src="/static/icons/vip.png" mode="aspectFit"></image>
              <text>时尚达人</text>
            </view>
          </view>
          <view class="user-stats">
            <view class="stat-item">
              <text class="num">{{userInfo.styleCount || 0}}</text>
              <text class="label">穿搭</text>
            </view>
            <view class="stat-item">
              <text class="num">{{userInfo.likeCount || 0}}</text>
              <text class="label">获赞</text>
            </view>
            <view class="stat-item">
              <text class="num">{{userInfo.rank || '99+'}}</text>
              <text class="label">排名</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 我的穿搭历史 -->
    <view class="history-section">
      <view class="section-header">
        <text class="title">我的穿搭秀</text>
        <text class="subtitle">每一次搭配都是一次进步~</text>
      </view>
      <view class="history-list">
        <view 
          class="history-item"
          v-for="(item, index) in historyList"
          :key="index"
          @click="navigateToDetail(item)"
        >
          <image class="style-image" :src="item.image" mode="aspectFill"></image>
          <view class="info">
            <view class="score-wrap">
              <text class="score">{{item.score}}分</text>
              <text class="score-tag">{{
                item.score >= 90 ? '🏆 大师级' :
                item.score >= 80 ? '✨ 优秀' :
                item.score >= 60 ? '💪 及格' :
                '😅 需要努力'
              }}</text>
            </view>
            <text class="desc">{{item.desc}}</text>
            <text class="date">{{item.date}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 成为VIP会员 -->
    <view class="vip-section">
      <view class="vip-header">
        <text class="title">解锁毒舌VIP</text>
        <text class="subtitle">做最靓的仔/最美妹</text>
      </view>
      <view class="vip-benefits">
        <view class="benefit-item">
          <text class="icon">🎯</text>
          <text>无限吐槽</text>
        </view>
        <view class="benefit-item">
          <text class="icon">🚫</text>
          <text>告别广告</text>
        </view>
        <view class="benefit-item">
          <text class="icon">🎨</text>
          <text>专属点评</text>
        </view>
      </view>
     
      
      <!-- 修改会员卡片部分 -->
      <view class="vip-cards">
        <!-- 月卡会员 -->
        <view 
          class="vip-card" 
          :class="{ featured: selectedPlan === 'month' }"
          @click="selectPlan('month')"
        >
          <text class="card-title">月卡会员</text>
          <text class="card-price">
            <text class="amount">¥28</text>/月
          </text>
          <button 
            class="subscribe-btn" 
            :class="{ featured: selectedPlan === 'month' }"
            @click.stop="handleSubscribe('month')"
          >
            立即开通
          </button>
        </view>
        <!-- 年卡会员 -->
        <view 
          class="vip-card"
          :class="{ featured: selectedPlan === 'year' }"
          @click="selectPlan('year')"
        >
          <text class="recommend-tag">年度特惠</text>
          <text class="card-title">年卡会员</text>
          <text class="card-price">
            <text class="amount">¥258</text>/年
          </text>
          <text class="save-tag">省¥78</text>
          <button 
            class="subscribe-btn"
            :class="{ featured: selectedPlan === 'year' }"
            @click.stop="handleSubscribe('year')"
          >
            立即开通
          </button>
        </view>
      </view>
    </view>

    <!-- 我的好友互动 -->
    <view class="friends-section">
      <view class="section-header">
        <view class="title-wrap">
          <text class="title">好友Battle</text>
          <text class="battle-count">{{friendsList.length}}个挑战</text>
        </view>
      </view>
      <!-- 我的好友互动部分 -->
      <view class="friends-list">
        <view 
          class="friend-item"
          v-for="(item, index) in friendsList"
          :key="index"
        >
          <view class="friend-info">
            <image class="friend-avatar" :src="item.avatar" mode="aspectFill"></image>
            <text class="friend-name">{{item.name}}</text>
            <text class="battle-tag" :class="{'high-score': item.score > 80}">
              {{item.score > 80 ? '实力选手 🔥' : '来者不拒 👊'}}
            </text>
          </view>
          <button class="response-btn" @click="handleResponse(item)">
            <text>应战</text>
            <text class="icon">⚔️</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        nickname: '时尚达人',
        avatar: '/static/default-avatar.png',
        userId: '888888',
        isVip: true,
        level: 6,
        styleCount: 28,
        likeCount: 389,
        rank: 12
      },
      historyList: [
        {
          id: 1,
          image: '/static/demo/style1.png',
          score: 95,
          desc: '街头潮流',
          date: '2024-01-20',
          tag: '精致穿搭',
          tagType: 'premium'
        },
        {
          id: 2,
          image: '/static/demo/style2.png',
          score: 85,
          desc: '休闲时尚',
          date: '2024-01-15',
          tag: '日常精选',
          tagType: 'normal'
        }
      ],
      friendsList: [
        {
          name: '小王',
          score: 88,
          id: 1,
          avatar: '/static/default-avatar.png'
        },
        {
          name: '小李',
          score: 75,
          id: 2,
          avatar: '/static/default-avatar.png'
        }
      ],
      selectedPlan: 'month' // 默认选中月卡
    }
  },
  methods: {
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/result/result?id=${item.id}`
      })
    },
    handleSubscribe(type) {
      uni.showModal({
        title: '开通会员',
        content: `确认开通${type === 'year' ? '年卡' : '月卡'}会员吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '订阅功能开发中',
              icon: 'none'
            })
          }
        }
      })
    },
    handleResponse(item) {
      uni.navigateTo({
        url: `/pages/upload/upload?challengeId=${item.id}&challenger=${item.name}`
      })
    },
    selectPlan(type) {
      this.selectedPlan = type; 
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 40rpx;
}

.user-card {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  padding: 40rpx 30rpx 60rpx;  // 增加底部内边距
  border-radius: 0 0 30rpx 30rpx;
  margin-bottom: 30rpx;
  
  .user-info {
    display: flex;
    align-items: center;  // 修改为center对齐
    gap: 30rpx;
    
    .avatar-wrap {
      flex-shrink: 0;
      position: relative;
      margin-top: 20rpx;  // 增加顶部间距
      
      .avatar {
        width: 140rpx;  // 增加头像尺寸
        height: 140rpx;
        border-radius: 70rpx;
        border: 4rpx solid #FFFFFF;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
      }
      
      .level-tag {
        position: absolute;
        bottom: -10rpx;
        right: -10rpx;
        background: #FFD700;
        color: #FFFFFF;
        font-size: 22rpx;  // 稍微增加字号
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.3);
      }
    }
    
    .info {
      flex: 1;
      
      .name-wrap {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 20rpx;  // 增加底部间距
        
        .name {
          font-size: 40rpx;  // 增加名字字号
          color: #FFFFFF;
          font-weight: bold;
        }
        
        .vip-tag {
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.2);
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          
          image {
            width: 32rpx;  // 增加图标尺寸
            height: 32rpx;
            margin-right: 6rpx;
          }
          
          text {
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }
      
      .user-stats {
        display: flex;
        justify-content: space-between;  // 修改为space-between
        margin-top: 30rpx;  // 增加顶部间距
        
        .stat-item {
          text-align: center;
          padding: 0 20rpx;  // 增加左右内边距
          
          .num {
            font-size: 36rpx;  // 增加数字字号
            color: #FFFFFF;
            font-weight: bold;
            display: block;
            margin-bottom: 8rpx;  // 增加底部间距
          }
          
          .label {
            font-size: 26rpx;  // 增加标签字号
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
  }
}

.history-section {
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  margin: 0 20rpx;
  
  .section-header {
    margin-bottom: 30rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 70%;
      background: linear-gradient(to bottom, #FF4785, #FF7B8C);
      border-radius: 3rpx;
    }
    
    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .history-list {
    .history-item {
      display: flex;
      gap: 20rpx;
      align-items: center;
      background: #FFFFFF;
      padding: 20rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, 
          rgba(255, 71, 133, 0.05) 0%,
          rgba(255, 123, 140, 0.05) 100%
        );
        opacity: 0;
        transition: opacity 0.3s;
      }
      
      &:active::after {
        opacity: 1;
      }
      
      .style-image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
        flex-shrink: 0;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      }
      
      .info {
        flex: 1;
        
        .score-wrap {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .score {
            font-size: 40rpx;
            font-weight: bold;
            background: linear-gradient(135deg, #FF4785 0%, #FF7B8C 100%);
            -webkit-background-clip: text;
            color: transparent;
            margin-right: 16rpx;
          }
          
          .score-tag {
            font-size: 26rpx;
            color: #666;
            background: #F8F8F8;
            padding: 4rpx 16rpx;
            border-radius: 20rpx;
          }
        }
        
        .desc {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 12rpx;
          font-weight: 500;
        }
        
        .date {
          font-size: 24rpx;
          color: #999;
          text-align: right;  // 添加靠右对齐
          margin-left: 20rpx; // 添加右边距
        }
      }
      
      &:nth-child(odd) {
        background: linear-gradient(to right, 
          rgba(255, 71, 133, 0.05) 0%,
          rgba(255, 255, 255, 1) 100%
        );
      }
      
      &:nth-child(even) {
        background: linear-gradient(to right, 
          rgba(139, 92, 246, 0.05) 0%,
          rgba(255, 255, 255, 1) 100%
        );
      }
    }
  }
}

.vip-section {
  margin: 30rpx;
  background: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  color: #FFFFFF;
  
  .vip-header {
    margin-bottom: 30rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .subtitle {
      font-size: 28rpx;
      opacity: 0.9;
    }

  }
  
  .vip-benefits {
    display: flex;
    justify-content: space-around;
    margin: 30rpx 0;
    
    .benefit-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;
      
      .icon {
        font-size: 40rpx;
      }
      
      text {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
  
  .vip-cards {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
    
    .vip-card {
      flex: 1;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16rpx;
      padding: 30rpx 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      
      &.featured {
        background: rgba(255, 255, 255, 0.2);
        border: 2rpx solid rgba(255, 255, 255, 0.3);
      }
      
      .recommend-tag {
        position: absolute;
        top: -12rpx;
        right: -12rpx;
        background: #FFD700;
        color: #FFFFFF;
        font-size: 22rpx;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
      
      .card-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
      }
      
      .card-price {
        margin-bottom: 20rpx;
        
        .amount {
          font-size: 48rpx;
          font-weight: bold;
        }
      }
      
      .save-tag {
        color: #FFD700;
        font-size: 24rpx;
        margin-bottom: 16rpx;
      }
      
      .subscribe-btn {
        width: 80%;
        height: 70rpx;
        line-height: 70rpx;
        background: #FFFFFF;
        color: #FF8A00;
        border-radius: 35rpx;
        font-size: 28rpx;
        font-weight: bold;
        margin-top: auto;
        text-align: center;  // 添加文字居中
        display: flex;      // 添加flex布局
        justify-content: center;  // 水平居中
        align-items: center;     // 垂直居中
        
        &.featured {
          background: #FFD700;
          color: #FFFFFF;
        }
      }
    }
  }
}

.subscribe-btn {
  width: 100%;
  background: #FFFFFF;
  border-radius: 40rpx;
  padding: 20rpx;
  margin: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .btn-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #FF8A00;
  }

  .btn-desc {
    font-size: 24rpx;
    color: #FF8A00;
    opacity: 0.8;
    margin-top: 4rpx;
  }
}

.year-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-top: 20rpx;

  .year-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }

  .year-price {
    font-size: 32rpx;
    font-weight: bold;
  }

  .discount {
    font-size: 24rpx;
    opacity: 0.8;
  }
}

.friends-section {
  margin: 30rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    margin-bottom: 30rpx;
    
    .title-wrap {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin-bottom: 8rpx;
      
      .title {
        font-size: 34rpx;
        font-weight: bold;
        color: #333;
      }
      
      .battle-count {
        font-size: 24rpx;
        color: #FF4785;
        background: rgba(255, 71, 133, 0.1);
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
    }
    
    .subtitle {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .friends-list {
    .friend-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      background: linear-gradient(to right, #F8F8F8, #FFFFFF);
      border: 2rpx solid #F0F0F0;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
      }
      
      .friend-info {
        display: flex;
        align-items: center;
        gap: 16rpx;
        
        .friend-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
          border: 4rpx solid #FFFFFF;
          box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
        }

        .friend-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 4rpx;
          }
          
          .action {
            font-size: 24rpx;
            color: #666;
          }
      }

      .battle-tag {
          display: flex;
          align-items: center;
          gap: 6rpx;
          font-size: 24rpx;
          color: #666;
          background: #F5F5F5;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          
          &.high-score {
            color: #FF4785;
            background: rgba(255, 71, 133, 0.1);
          }
          
          .tag-icon {
            font-size: 28rpx;
          }
        }

        .response-btn {
          display: flex;
          align-items: center;
          gap: 8rpx;
          height: 56rpx; // 减小按钮高度
          line-height: 56rpx; // 调整文字垂直居中
          padding: 0 24rpx; // 调整水平内边距
          background: linear-gradient(135deg, #FF4D4D 0%, #F53D3D 100%);
          color: #FFFFFF;
          border: none;
          padding: 12rpx 28rpx;
          border-radius: 30rpx;
          font-size: 26rpx;
          font-weight: bold;
          box-shadow: 0 4rpx 12rpx rgba(255, 77, 77, 0.3);
          transition: all 0.3s;
          position: relative;
          overflow: hidden;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, 
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.1) 50%,
              rgba(255, 255, 255, 0) 100%
            );
            transform: translateX(-100%);
            transition: transform 0.6s;
          }
          
          &:active {
            transform: scale(0.95);
            background: linear-gradient(135deg, #E63939 0%, #D92E2E 100%);
            
            &::before {
              transform: translateX(100%);
            }
          }
          
          .icon {
            font-size: 28rpx;
            margin-left: 4rpx;
          }
        }
    }
  }
}
</style>